<template>
    <tr>
        <td>
            <span>{{data.course}}</span>
        </td>
        <td>
            <span>{{data.teacher}}</span>
        </td>
        <td>
            <span>{{data.quantity}}</span>
        </td>
        <td>
            <button
                    class="c-btn btn-primary"
                    v-if="data.isSelected === 0"
                    @click="selectCourse"
            >选择
            </button>
            <button
                    class="c-btn btn-warning"
                    v-if="data.isSelected === 1"
                    @click="selectCourse"
            >已选择</button>
        </td>
    </tr>
</template>

<script>
    export default {
        name: "SelectTableItem",
        props: {
            data: Object
        },
        setup(props, context) {

            const selectCourse = () => {
                context.emit('selectCourse', props.data)
            }

            return {
                selectCourse
            }
        }
    }
</script>

<style lang="scss" scoped>
span {
    display: block;
    padding: 10px 20px;
}
button {
    width: 80px;
}
</style>